<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div id="main" style="width: 750px;height:500px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import _ from "lodash"
export default {
  name: "Datachart",
  data(){
    return {
      
    }
  },
  methods: {
    async getchart(){
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
            tooltip: {},  
      };

      const {data: res} = await this.$http.get("/reports/type/1");
      console.log(res);
      const result = _.merge(option,res.data);
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(result);
    }
  },
  mounted() {
    this.getchart();
  },
}
</script>

<style scpoed>
  .el-card{
    margin: 30px 0px;
  }
</style>